<template>
  <div>
    <van-nav-bar
      right-text="账号密码登录"
      @click-left="back"
      @click-right="onClickMi"
    >
      <template #left>
        <van-icon name="arrow-left" color="#000" size="22" />
      </template>
    </van-nav-bar>
    <div class="zc">
      <p class="denglu_1">登录后才精彩</p>
      <p class="denglu_2">若该手机号未注册,将自动注册成功</p>
    </div>
    <van-form @submit="onSubmit">
      <van-field v-model="phone" placeholder="请输入手机号" label="手机号" clearable />
      <van-field
        v-model="sms"
        center
        clearable
        label="短信验证码"
        placeholder="请输入验证码"
        maxlength="4"
      >
        <template #button v-if="show">
          <van-button size="small" type="primary" @click="getSms"
            >获取验证码</van-button
          >
        </template>
        <template #button v-else>
          <van-button disabled size="small" type="primary"
            >重发验证码({{ count }})</van-button
          >
        </template>
      </van-field>
      <div class="checkbox">
        <van-checkbox v-model="check" checked-color="#48803f" icon-size="14px">
        </van-checkbox>
        <span>
          登录即同意<a
            >联通/移动统一认证服务条<br />
            款</a
          >、美食天下<router-link to="/login_my_yhxy">用户协议</router-link
          >与<router-link to="/login_my_ystk">隐私条款</router-link>
        </span>
      </div>
      <van-button round block type="info" native-type="submit" v-show="check">登录</van-button>
      <van-button disabled round block type="info" class="dldisabled" v-show="!check">登录</van-button>
    </van-form>
    <div class="center">
      <a class="button" @click="s()"
        >其他登录方式
        <van-icon :name="checked ? down : up" />
      </a>
      <van-row v-show="!checked">
        <van-col span="8">
          <a>
            <van-image :src="wx" width="30" />
          </a>
        </van-col>
        <van-col span="8">
          <van-image :src="qq" width="30" />
        </van-col>
        <van-col span="8">
          <van-image :src="wb" width="30" />
        </van-col>
      </van-row>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: true,
      count: "",
      timer: null,
      phone: "",
      sms: "",
      check: false,
      checked: true,
      up: require("../assets/icon/icon_login_arrow_up.png"),
      down: require("../assets/icon/icon_login_arrow_down.png"),
      qq: require("../assets/icon/icon_share_qq_friend.png"),
      wx: require("../assets/icon/icon_share_weixin.png"),
      wb: require("../assets/icon/icon_share_weibo.png"),
    };
  },
  methods: {
    back() {
      this.$router.push("/login");
    },
    onClickMi() {
      this.$router.push("/login_mi");
    },
    s() {
      if (this.checked == true) {
        this.checked = false;
      } else {
        this.checked = true;
      }
    },
    getSms() {
      let phoneRegExp = /^1[3456789]\d{9}$/;
      if (phoneRegExp.test(this.phone)) {
        const TIME_COUNT = 60;
        if (!this.timer) {
          this.count = TIME_COUNT;
          this.show = false;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--;

            } else {
              this.show = true;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000);
        }
        let object = {
          phone: this.phone,
        };
        this.axios
          .post("/login_my", this.qs.stringify(object))
          .then((res) => {
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        this.$toast({
          message: "手机号码格式不正确喔",
          position: "top",
          duration: 3000,
        });
      }
    },
    onSubmit(){
      let object = {
          sms: this.sms,
        };
      this.axios.post("login_my",this.qs.stringify(object)).then((res)=>{
        if(res.data.code == 200){
          this.$router.push('/')
        }else{
          this.$toast({
          message: "验证码不正确",
          duration: 3000,
        });
        }
      }).catch((err)=>{
        console.log(err);
      })
    }
  },
};
</script>
<style scoped>
.denglu_1 {
  font-size: 24px;
  font-weight: 500;
  margin: 15px 25px;
  margin-top: 30px;
}
.denglu_2 {
  font-size: 18px;
  margin: 15px 25px;
  margin-bottom: 40px;
}
.van-nav-bar__text {
  color: #498140;
}
.van-button--primary {
  background-color: transparent;
  border: 1px solid #333;
  color: #666;
  border-radius: 999px;
  padding: 0 15px;
}
.checkbox {
  font-size: 14px;
  color: #666;
  text-align: center;
  margin: 15px 0;
}
form > div:nth-child(3) > div {
  display: inline-block;
  text-align: center;
}
span > a {
  color: #141414;
}
.van-button--info {
  background-color: #48803f;
  border: 1px solid #52794c;
}
.van-button--block {
  width: 90%;
  margin: 25px auto;
}
.button {
  border: 1px solid #fff;
  text-align: center;
  color: #666;
  font-size: 12px;
  display: inline-block;
  margin: 12px 0;
}
.center {
  text-align: center;
}
.dldisabled{
  color: #5e5e5e;
  background-color: #ececec;
  border: 0;
}
</style>